<%= turbo_frame_tag dom_id(comment) do %>
  <div class="space-y-2 issue-comment" data-author-id="<%= comment.author_id %>" data-issue--comments-target="comment">
    <div class="text-xs text-base-content italic pl-2">
      <%= t(".created_at", date: l(comment.created_at, format: :long)) %>
    </div>

    <%= react_component("MarkdownEditor", defaultValue: comment.content, readOnly: true) %>

    <div class="flex justify-between text-xs px-2 hidden js-comment-actions">
      <div class="gap-1 flex justify-end">
        <%= link_to edit_issue_comment_path(comment.issue, comment),
          class: "btn btn-ghost btn-xs btn-primary" do %>
          <%= t("actions.edit") %>
        <% end %>
        <span class="text-base-content">&middot;</span>
        <%= link_to issue_comment_path(comment.issue, comment),
          data: {
            turbo_confirm: t("confirmations.delete_comment"),
            turbo_method: :delete
          },
          class: "btn btn-ghost btn-xs btn-error" do %>
          <%= t("actions.remove") %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>